vue
<template>
  <div>
    <div ref="pdfContent">
      <!-- Your content to convert to PDF -->
      <h1>总经办 隐患排查（月）</h1>
      <table border="1px" cellspacing="0" >
        <tr>
          <td>单位名称：</td>
          <td colspan="3">重庆市xx有限公司</td>
        </tr>
        <tr>
          <td>检查部门</td>
          <td>总经办</td>
          <td>检查人员</td>
          <td>张红</td>
        </tr>
        <tr>
          <td>检查地址：</td>
          <td colspan="3">重庆市江津区G348停车场</td>
        </tr>
        <tr>
          <td>检查照片</td>
          <img src="https://axd-1256474543.cos.ap-chongqing.myqcloud.com/axd/IMAGE/2024/05/29/8w75MiBVILZ5fDKxhQ_8RQ_1795710132559155200.jpg" style="width: 150px;height: 150px;">
        </tr>

        <tr>
          <td rowspan="6">检查项目</td>
          <td colspan="3">安全管理</td>
        </tr>

        <tr>
          <td>主要负责人考核合格证明√</td>
          <td>公司制度文件合规性检查√</td>
          <td>周排查记录√</td>
        </tr>

        <tr>
          <td>安全管理人员考核合格证明√</td>
          <td>安全费用使用记录√</td>
          <td>安全费用提取记录√√</td>
        </tr>

        <tr>
          <td>安全隐患通报记录√</td>
          <td>岗前培训记录√</td>
          <td>日常培训记录√</td>
        </tr>

        <tr>
          <td>日排查记录√</td>
          <td>月排查记录√</td>
          <td>目标责任考核记录√</td>
        </tr>

        <tr>
          <td>车辆管理登记台账√</td>
          <td>运输车辆安全技术档案√</td>
          <td>风险分级管控清单（公司级）√</td>
        </tr>

        <tr>
          <td>隐患项目√</td>
          <td colspan="3">无隐患项目√</td>
        </tr>

        <tr>
          <td>
            <img v-if="qrCodeUrl" :src="qrCodeUrl" style="width: 100px;height: 100px;">
            <br/>
            扫描查询真伪
            <br/>
            网址：https://risk.cqxingxun.com/
          </td>
          <td colspan="3">检查人员签名：</td>
        </tr>

      </table>

    </div>
    <el-button type="primary" plain icon="Refresh" @click="generatePDF">生成隐患排查(月)PDF</el-button>
  </div>
</template>
<script setup>
import { ref } from 'vue';
//引入element按钮美化
import { Delete, Edit, Search, Share, Upload,Refresh,Plus,Close } from '@element-plus/icons-vue'


//pdf生成
import html2pdf from 'html2pdf.js';
const pdfContent = ref(null);

const generatePDF = () => {
  const content = pdfContent.value;
  const image = new Image();
  image.src = 'https://axd-1256474543.cos.ap-chongqing.myqcloud.com/axd/IMAGE/2024/05/29/8w75MiBVILZ5fDKxhQ_8RQ_1795710132559155200.jpg';
  image.onload = () => {
    const watermark = document.createElement('div');
    watermark.style.position = 'fixed';
    watermark.style.top = '50%'; // 调整顶部位置
    watermark.style.left = '50%'; // 调整左侧位置
    watermark.style.transform = 'translate(-50%, -50%) rotate(-45deg)'; // 居中并旋转水印
    watermark.style.fontSize = '30px';
    watermark.style.color = '#ccc';
    watermark.innerText = '安行达'; // 水印文本
    content.appendChild(watermark.cloneNode(true));
    html2pdf(content, {
      margin: 10,
      filename: 'mypdf.pdf',
      image: { type: 'jpeg', quality: 0.98 },
      html2canvas: { scale: 2 },
      jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' }
    });
  };
};

// const generatePDF = () => {
//   const content = pdfContent.value;
//   // Create a watermark element
//   const watermark = document.createElement('div');
//   watermark.style.position = 'fixed';
//   watermark.style.top = '50%'; // Adjust top position
//   watermark.style.left = '50%'; // Adjust left position
//   watermark.style.transform = 'translate(-50%, -50%) rotate(-45deg)'; // Center and rotate watermark
//   watermark.style.fontSize = '30px';
//   watermark.style.color = '#ccc';
//   watermark.innerText = '安行达'; // Watermark text
//   // Add watermark to each page of the PDF content
//   content.appendChild(watermark.cloneNode(true));
//   html2pdf(content, {
//     margin: 10,
//     filename: 'mypdf.pdf',
//     image: { type: 'jpeg', quality: 0.98 },
//     html2canvas: { scale: 2 },
//     jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' }
//   });
// };


//二维码代码
import QRCode from 'qrcode'; // 引入qrcode库 userid 后端查询图片  返回前端  展示
// 创建响应式数据qrCodeUrl
const qrCodeUrl = ref('');
// 生成二维码
const generateQRCode = () => {
  // 调用qrcode库的toDataURL方法生成二维码图片的Base64编码   B工程
  QRCode.toDataURL(`https://axd-1256474543.cos.ap-chongqing.myqcloud.com/axd/IMAGE/2024/05/29/8w75MiBVILZ5fDKxhQ_8RQ_1795710132559155200.jpg`)
      // 成功生成二维码
      .then(url => {
        qrCodeUrl.value = url;
      })
      // 生成二维码出错
      .catch(err => {
        console.error('生成二维码出错:', err);
      });
};
// 调用生成二维码的方法
generateQRCode();
</script>